<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>预定房间</title>
    <link href="http://localhost:8080/hotle/css/bootstrap.css" rel="stylesheet" type="text/css"
          media="all">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://localhost:8080/hotle/js/jquery-1.11.0.min.js"></script>
    <!-- Custom Theme files -->
    <link href="http://localhost:8080/hotle/css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Mr Hotel Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <script type="application/x-javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!--Google Fonts-->
    <link href='//fonts.googleapis.com/css?family=Hind:400,300'
          rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Aladin' rel='stylesheet'
          type='text/css'>
    <!--google fonts-->
    <!-- animated-css -->
    <link href="http://localhost:8080/hotle/css/animate.css" rel="stylesheet" type="text/css"
          media="all">

    <link href="http://localhost:8080/hotle/css/single.css" rel="stylesheet" type="text/css"
          media="all">
    <script src="http://localhost:8080/hotle/js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
    <!-- animated-css -->
    <script src="http://localhost:8080/hotle/js/bootstrap.min.js"></script>
</head>
<body>
<!--header-top start here-->
<!-- <div class="top-header">
<div class="container">
    <div class="top-header-main">
        <div class="col-md-4 top-social wow bounceInLeft" data-wow-delay="0.3s">
            <ul>
                <li><h5>联系我们 :</h5></li>
                <li><a href="#"><span class="fb"> </span></a></li>
                <li><a href="#"><span class="tw"> </span></a></li>
                <li><a href="#"><span class="in"> </span></a></li>
                <li><a href="#"><span class="gmail"> </span></a></li>
            </ul>
        </div>
        <div class="col-md-8 header-address wow bounceInRight" data-wow-delay="0.3s">
            <ul>
                <li><span class="phone"> </span> <h6>020-8878787</h6></li>
                <li><span class="email"> </span><h6><a href="mailto:info@example.com">gj1301396@216.com</a></h6></li>
            </ul>
        </div>
      <div class="clearfix"> </div>
    </div>
</div>
</div> -->
<!--header-top end here-->
<!--header start here-->
<!-- NAVBAR
    ================================================== -->
<div class="header">
    <div class="fixed-header">

        <div class="navbar-wrapper">
            <div class="container">
                <nav class="navbar navbar-inverse navbar-static-top">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed"
                                data-toggle="collapse" data-target="#navbar"
                                aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span> <span
                                class="icon-bar"></span> <span class="icon-bar"></span> <span
                                class="icon-bar"></span>
                        </button>

                        <div class="logo wow slideInLeft" data-wow-delay="0.3s">
                            <a class="navbar-brand" href="HotleMain.html"><img
                                    src="http://localhost:8080/hotle/images/logo.png"/></a>
                        </div>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <nav class="cl-effect-16" id="cl-effect-16">
                            <ul class="nav navbar-nav">
                                <li><a href="HotleMain.html" data-hover="首页">首页</a></li>
                                <li><a th:href="@{/users/findHotleToReception}" data-hover="酒店预订">酒店预订</a></li>
                                <!--<li><a href="HotleSelected.html" data-hover="精选酒店">精选酒店</a></li>-->
                                <!--<li><a href="room.html" data-hover="Rooms">Rooms</a></li>-->
                                <li><a th:href="@{/users/findOrderByUser}" data-hover="我的订单">我的订单</a></li>
                                <li><a th:href="@{/users/UserCount}" data-hover="帐号管理">帐号管理</a></li>
                            </ul>
                        </nav>

                    </div>
                    <div class="clearfix"></div>
                </nav>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!--header end here-->
<!--single start here-->
<div class="single">
    <div class="container">

        <div class="single-top wow bounceInLeft" data-wow-delay="0.3s">

            <div class="lone-line" style="padding-bottom: 50px">
                <h1 th:text="${hotlelist.hotlename}">酒店名字</h1>
                <p><img th:src="'/manage/images/'+${hotlelist.hotleImg}" style="width: 30%;height: 30%"/></p>


                <!-- <ul class="grid-blog">
                        <li><span><i class="glyphicon glyphicon-time"> </i>08.09.2014</span></li>
                        <li><a href="#"><i class="glyphicon glyphicon-comment"> </i>5 Comment</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-share"> </i>Share</a></li>
                    </ul> -->

                <p class="wow fadeInLeft animated" data-wow-delay=".5s" th:text="${hotlelist.hotleDec}">介绍</p>
                <p>酒店地址:<span th:text="${hotlelist.hotleCity}"></span></p>
                <p>联系电话:<span th:text="${hotlelist.hotlePhone}"></span></p>
                <p>设施:<span th:text="${roomFaci}"></span></p>
            </div>

            <div class="lone-line">
                <!--<form>-->
                <table class="roomme">
                    <tr>
                        <th>床型</th>
                        <th>价格</th>
                        <th>当前状态</th>
                    </tr>
                    <tr th:each="room:${roomlist}">
                        <span style="display: none" th:text="${room.roomnumnum}" th:id="'num'+${room.roomId}"></span>
                        <td th:text="${room.roomType}">标准</td>
                        <td th:text="'￥'+${room.roomPrice}">222</td>
                        <th><span style="color: #F1C873" th:id="'able'+${room.roomId}">可预定</span>
                            <span style="color: red;" th:id="'disable'+${room.roomId}">满房</span>
                        </th>
                        <th>
                            <a th:id="'book'+${room.roomId}" onload="load();" th:href="@{ToSingleBookCon(hotlename=${hotlelist.hotlename},roomprice=${room.roomPrice},roomType=${room.roomType})}">立即预定</a>
                            <span th:id="'disbook'+${room.roomId}" style="text-decoration:line-through;">立即预定</span>
                        </th>
                    </tr>
                </table>
                <!--</form>-->
            </div>
            <div class="gallery" id="gallery">
                <div class="container">
                    <div class="gallery-main wow zoomIn" data-wow-delay="0.3s">
                        <div class="gallery-top">
                            <h1>房型信息</h1>
                        </div>
                        <div class="gallery-bott">
                            <div class="col-md-4 col1 gallery-grid" th:each="room:${roomlist}">
                                <a th:href="'/manage/images/'+${room.roomImg}" rel="title"
                                   class="b-link-stripe b-animate-go  thickbox">
                                    <figure class="effect-bubba">
                                        <img class="img-responsive" th:src="'/manage/images/'+${room.roomImg}" alt="">
                                        <figcaption>
                                            <h4 class="gal">查看图片</h4>
                                            <p class="gal1">床型</p>
                                        </figcaption>
                                    </figure>
                                </a>
                            </div>

                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <script src="http://localhost:8080/hotle/js/jquery.chocolat.js"></script>
            <link rel="stylesheet" href="http://localhost:8080/hotle/css/chocolat.css" type="text/css"
                  media="screen" charset="utf-8">
            <!--light-box-files -->
            <script type="text/javascript" charset="utf-8">
                $(function () {
                    $('.gallery-grid a').Chocolat();
                });
            </script>
        </div>
        <div class="comment wow bounceInRight" data-wow-delay="0.3s">
            <h3>评论</h3>
            <div class="media wow fadeInLeft animated" data-wow-delay=".5s" th:each="commentlist:${commentlist}">
                <div class="code-in">
                    <p class="smith">
                        <a href="#" th:text="${commentlist.username}">姓名</a> <span th:text="${commentlist.commentDate}">日期</span>
                    </p>
                    <p class="reply"></p>
                    <div class="clearfix"></div>
                </div>
                <div class="media-left">
                    <a href="#"> </a>
                </div>
                <div class="media-body">

                    <p th:text="${commentlist.commentText}">评论内容</p>
                </div>
            </div>

        </div>
        <div class="leave wow bounceInLeft" data-wow-delay="0.3s">
            <h2>我要评论</h2>

            <form  id="form_add">
                <div class="single-grid wow fadeInLeft animated"
                     data-wow-delay=".5s">
                    <div style="display:none">
                        <input th:value="${hotlelist.hotlename}" name="hotlename" />
                    </div>
                   <div style="display:none">
                       <input th:value="${users}" name="username" /></div>
                    <!--<input id="roomPrice" name="roomPrice" type="text" value="￥0" style="display:none"/>-->
                    <input name="commentDate" id="commentDate" style="display: none" type="text"/>
                    <!--<input name="commentDate" id="commentDate1" type="text"/>111-->
                    <!--<span style="display: none" th:text="${hotlelist.hotlename}"></span>-->
						<textarea value=" " onfocus="this.value='';"
                                  onblur="if (this.value == '') {this.value = 'Comment';}" name="commentText">输入</textarea>
                    <label class="hvr-rectangle-out">
                        <input onclick="setDate()" type="submit" value="Send" id="send"/>
                        <!--<input onclick="setDate()" type="button" value="1111"/>-->
                    </label>
                </div>
            </form>
        </div>
    </div>
</div>
<script >
    $(function(){
        $("#send").click(function(){
            // alert("123");
            // alert($("#form_add").serialize());
            $.ajax({
                type:'post',
                //将数据提交到后台
                url: "http://localhost:8080/users/addComment",
                data:$("#form_add").serialize(),
                success: function (result) {
                    window.location.href=window.location.href;
                    // alert("添加成功")
                    //跳转到新页面
                    // window.location.href="/users/toIndex";
                    // alert(this.data);
                }
            });
        });
    });



</script>
<script>
    function setDate(){
        // var date=new Date();
        var d = new Date();
        d=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
        document.getElementById("commentDate").value=d;



        // document.getElementById("commentDate1").value=date.Date();
        // alert(date.Date());
    }
    window.onload=function () {
        for (var i=1;i<100;i++){
            var roomNum="num"+i;
            var disable="disable"+i;
            var able="able"+i;
            var book="book"+i;
            var disbook="disbook"+i;
            var num=document.getElementById(roomNum).innerHTML;
            if (num=="0"){
                document.getElementById(disable).style.display="inline-block";
                document.getElementById(able).style.display="none";
                document.getElementById(book).style.display="none";
                document.getElementById(disbook).style.display="inline-block";
            }else{
                document.getElementById(able).style.display="inline-block";
                document.getElementById(disable).style.display="none";
                document.getElementById(book).style.display="inline-block";
                document.getElementById(disbook).style.display="none";
            }
        }
    }
</script>
<!---->
<!--single end here-->

<!--footer start here-->
<!--<div class="footer">-->
    <!--<div class="container">-->
        <!--<div class="footer-main">-->
            <!--<div class="col-md-3 ftr-grid wow zoomIn" data-wow-delay="0.3s">-->
                <!--<div class="ftr-logo">-->
                    <!--<img src="http://localhost:8080/hotle/images/ftr-logo.png" alt="">-->
                <!--</div>-->
                <!--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed-->
                    <!--do eiusmod tempor incididunt.</p>-->
                <!--<a href="single.html" class="ftr-btn">Read More</a>-->
            <!--</div>-->
            <!--<div class="col-md-3 ftr-grid ftr-mid wow zoomIn"-->
                 <!--data-wow-delay="0.3s">-->
                <!--<h3>Address</h3>-->
                <!--<span class="ftr-line flm"> </span>-->
                <!--<p>Eye Associates Of Virginia?</p>-->
                <!--<p>5875 Bremo Road</p>-->
                <!--<p>Richmond, VA(Virginia) 23226</p>-->
                <!--<p>(804) 287-4216</p>-->
                <!--<p>Alice Merriman</p>-->

            <!--</div>-->
            <!--<div class="col-md-3 ftr-grid ftr-rit wow zoomIn"-->
                 <!--data-wow-delay="0.3s">-->
                <!--<h3>Contact Us</h3>-->
                <!--<form>-->
                    <!--<input type="text" value="Email" onfocus="this.value = '';"-->
                           <!--onblur="if (this.value == '') {this.value = 'Email';}"> <input-->
                        <!--type="submit" value="Send"/>-->
                <!--</form>-->
                <!--<ul class="ftr-icons">-->
                    <!--<li><a href="#"><span class="fa"> </span></a></li>-->
                    <!--<li><a href="#"><span class="tw"> </span></a></li>-->
                    <!--<li><a href="#"><span class="link"> </span></a></li>-->
                    <!--<li><a href="#"><span class="gmail"> </span></a></li>-->
                <!--</ul>-->
            <!--</div>-->
            <!--<div class="col-md-3 ftr-grid ftr-last-gd ftr-rit wow zoomIn"-->
                 <!--data-wow-delay="0.3s">-->
                <!--<h3>Quick Link</h3>-->
                <!--<ul class="ftr-nav">-->
                    <!--<li><a href="index.html">Home</a></li>-->
                    <!--<li><a href="about.html">About</a></li>-->
                    <!--<li><a href="services.html">Services </a></li>-->
                    <!--<li><a href="room.html">Rooms</a></li>-->
                    <!--<li><a href="contact.html">Contact</a></li>-->
                <!--</ul>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<!--footer end here-->
<!--copy rights start here-->
<!--<div class="copy-right">-->
    <!--<div class="container">-->
        <!--<div class="copy-rights-main wow zoomIn" data-wow-delay="0.3s">-->
            <!--<p>-->
                <!--© 2016 Mr Hotel. All Rights Reserved | Design by <a-->
                    <!--href="http://w3layouts.com/" target="_blank">W3layouts</a>-->
            <!--</p>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
</body>
</html>